/*** 按钮的统一样式 ***/

/*  button class 类名
<div class='container'>
    <div class="button-container">
        <div class='button -regular center'>Let's start</div>
        <div class='button -dark center'>Touch me</div>
        <div class='button -green center'>Just like that</div>
        <div class='button -blue center'>And that, oh, yeah</div>  
        <div class='button -salmon center'>Now that I like</div>
        <div class='button -sun center'>God, that's so nice</div>
        <div class='button -alge center'>Now lower down</div>
        <div class='button -flower center'>Where the figs lie</div>
    </div>
</div>
*/

:root{
    --color-dark: #161616;
    --color-ocean: #416dea;
    --color-grass: #3dd28d;
    --color-snow: #FFFFFF;
    --color-salmon: #F32C52;
    --color-sun: #feee7d;
    --color-alge: #7999a9;
    --color-flower: #353866;
    --color-smoke: #e4e4e4;
    --font-face: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.button-container{flex-wrap: wrap;}
.button{
    display: flex; overflow: hidden; margin: 5px; padding: 8px 10px; cursor: pointer; -webkit-user-select: none;
    -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 150ms linear; text-align: center;
    white-space: nowrap; text-decoration: none !important; text-transform: none; text-transform: capitalize; color: #fff;
    border: 0 none; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 1.3; -webkit-appearance: none;
    -moz-appearance: none; appearance: none; justify-content: center; align-items: center; flex: 0 0 160px;
    box-shadow: 0.1px 0px 5px var(--color-smoke);
}
.button:hover{transition: all 150ms linear; opacity: .85;}
.button:active{transition: all 150ms linear; opacity: .75;}
.button:focus{outline: 1px dotted #959595; outline-offset: -4px;}
.button.-regular{color: #202129; background-color: #f2f2f2;}
.button.-regular:hover{color: #202129; background-color: #e1e2e2; opacity: 1;}
.button.-regular:active{background-color: #d5d6d6; opacity: 1;}
.button.-dark{color: var(--color-snow); background: var(--color-dark);}
.button.-dark:focus{outline: 1px dotted white; outline-offset: -4px;}
.button.-green{color: var(--color-snow); background: var(--color-grass);}
.button.-blue{color: var(--color-snow); background: var(--color-ocean);}
.button.-salmon{color: var(--color-snow); background: var(--color-salmon);}
.button.-sun{color: #f15c5c; background: var(--color-sun);}
.button.-alge{color: #e7ff20; background: var(--color-alge);}
.button.-flower{color: #FE8CDF; background: var(--color-flower);}




/*** 字体颜色 ***/
.call-test{color: #fff; background: #f90;}